<template>
    <div class="myList">
        <div>
            <div class="one" v-for="(item,index) in one" :key="index">
                <p>{{item.channel_info.name}}</p>
                <div class="box1" v-for="(ele,i) in item.list" :key="i" @click="$router.push('/teachDetail?id='+ele.teacher_id)">
                    <img :src="ele.teacher_avatar" />
                    <div class="bottom">
                        <div class="name">{{ele.teacher_name}}</div>
                        <div class="title">{{ele.introduction}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="two" v-for="(item,index) in two" :key="index">
                <p>{{item.channel_info.name}}</p>
                <div class="box1" v-for="(ele,i) in item.list" :key="i" @click='goDetail(ele.id)'>
                    <div class="title">{{ele.title}}</div>
                    <div class="num">共点击量{{ele.sales_num}}</div>
                    <div class="bao">{{ele.id}}人报名</div>
                    <div>
                        <img :src="ele.cover_img" />
                    </div>
                    <div class="price">
                      <i class="iconfont icon-jinbi"></i>
                      {{ele.price}}.00
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="one" v-for="(item,index) in three" :key="index">
                <p>{{item.channel_info.name}}</p>
                <div class="box1" v-for="(ele,i) in item.list" :key="i" @click="$router.push('/teachDetail?id='+ele.teacher_id)">
                    <img :src="ele.teacher_avatar" />
                    <div class="bottom">
                        <div class="name">{{ele.teacher_name}}</div>
                        <div class="title">{{ele.introduction}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { cartList } from "../../../request/http.js";
export default {
  data() {
    return {
      one: [],
      two: [],
      three: []
    };
  },
  methods: {
    goDetail(id){
      this.$router.push('/bookDetail?id='+id)
    }
  },
  created() {
    cartList().then(res => {
      console.log(res);
      this.one = res.slice(0, 1);
      this.two = res.slice(1, 2);
      this.three = res.slice(2);
    });
  }
};
</script>

<style lang="scss" scoped>
.myList {
  background-color: #f5f5f5;
}
.one {
  width: 712px;
  margin: 0 auto;
  overflow: hidden;
  p {
    padding-left: 15px;
    font-size: 35px;
    border-left: 5px solid red;
    margin: 30px 0;
  }
  .box1 {
    background-color: #fff;
    width: 100%;
    height: 174px;
    border-radius: 15px;
    display: flex;
    margin: 15px 0;
    display: flex;
    align-items: center;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 0 30px;
    }
    .bottom {
      flex: 1;
      .name,
      .title {
        margin: 15px 0;
      }
      .name {
        font-size: 30px;
      }
    }
  }
}
.two {
  width: 712px;
  margin: 0 auto;
  overflow: hidden;
  p {
    padding-left: 15px;
    font-size: 35px;
    border-left: 5px solid red;
    margin: 30px 0;
  }
  .box1{
    height: 340px;
    background-color: #fff;
    border-radius: 15px;
    margin: 15px 0;
    overflow: hidden;
    position: relative;
    .title{
        font-size: 35px;
        margin: 30px;
    }
    .num{
        margin: 0 30px;
        margin-top: -20px;
        font-size: 25px;
    }
    .bao{
        margin-left: 30px;
        margin-top: 160px;
    }
    img{
        position: absolute;
        width: 80px;
        height: 80px;
        bottom: 80px;
        left: 30px;
    }
    .price{
      color: #ffa500;
      position: absolute;
      right: 30px;
      bottom: 30px;
      font-size: 30px;
    }
  }
}
</style>
